<template>
    <div class="action-bar">

      
    <SelectAll />
    <!--  12  设置删除 deleteShow  -->
    <TotalMountBtn v-show="deleteShow"/>
    <DeleteBtn v-show="!deleteShow"/>

      <TotalPrice  v-show="deleteShow"/>
    </div>
</template>
<script>
import SelectAll from "./SelectAll.vue"
import TotalPrice from './ToatalPrice.vue'
import TotalMountBtn from './TotalMountBtn.vue'
import DeleteBtn from './DeleteBtn.vue'
import { mapState } from 'vuex'
export default {
    name:"Total",
    components:{
        SelectAll,
        TotalPrice,
        TotalMountBtn,
        DeleteBtn
    },
    computed:{
        ...mapState(['deleteShow'])
    }
    
 
}
</script>
<style lang="scss" scoped>
    .action-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: .52rem;
  font-size: 15px;
  background-color: #fff;
  border-top: 1px solid #ddd;
}


.total {
  float: right;
  color: #363636;
  font-size: 14px;
  line-height: 50px;
  margin-right: 20px;
}

.total span {
  color: #7a45e5;
}

.total b {
  font-size: 17px;
  margin-left: 4px;
}

.del-box .total {
  display: none;
}

.del-box .buy-btn {
  display: none;
}

.del-box .del-btn {
  display: block;
}
</style>